<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给简单图案添加纹理-小试牛刀-shader实现高斯模糊</title>
    <style>
        canvas{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="1000" height="554"></canvas>

    <script src="/common/lib/gl-renderer.js"></script>

    <script type="module">
        import {  gaussianMatrix } from "/review/common/lib/utils.js"

        /**
         * 1.创建renderer对象
         * 2.创建webgl程序
         * 3.创建uniform变量
         * 4.将数据存入缓冲区
         * 5.渲染
         * */ 

        //  1.
        const canvas = document.querySelector("canvas");
        const renderer = new GlRenderer(canvas);

        (async function(){
            
            // 2.
            const vertex = `
                attribute vec2 a_vertexPosition;
                attribute vec2 uv;
                varying vec2 vUv;

                void main(){
                    vUv = uv;
                    gl_Position = vec4(a_vertexPosition, 1.0, 1.0);
                }
            `;
            const fragment = `
                #ifdef GL_ES
                    precision mediump float;
                #endif

                uniform sampler2D tMap;
                uniform float tGaussian[7];
                uniform int uRadius;
                uniform vec2 uResolution;

                varying vec2 vUv;

                void main(){
                    
                    // 取当前的坐标点
                    vec2 st = gl_FragCoord.xy / uResolution;
                    vec4 color = texture2D(tMap, st);
                    
                    // 高斯模糊实现
                    vec3 tColor1 = vec3(0.0, 0.0, 0.0);
                    vec3 tColor2 = vec3(0.0, 0.0, 0.0);

                    // x方向
                    for(int i = -3; i <= 3; i++){
                        float x = gl_FragCoord.x + float(i);
                        if(x > 0.0 && x < uResolution.x){
                            vec4 tColor = texture2D(tMap, vec2(x, gl_FragCoord.y) / uResolution);
                            tColor1.rgb += tColor.rgb * tGaussian[i + 3];
                        }
                    }
                    
                    // y方向
                    for(int i = -3; i <= 3; i++){
                        float y = gl_FragCoord.y + float(i);
                        if(y > 0.0 && y < uResolution.y){
                            vec4 tColor = texture2D(tMap, vec2(gl_FragCoord.x, y) / uResolution);
                            tColor2.rgb += tColor.rgb * tGaussian[i + 3];
                        }
                    }

                    gl_FragColor.rgb = mix(tColor1, tColor2, 0.5);
                    gl_FragColor.a = color.a;
                }
            `;
            const program = renderer.compileSync(fragment,vertex);
            renderer.useProgram(program);

            // 3.
            const texture = await renderer.loadTexture("./assets/girl1.jpg");
            renderer.uniforms.tMap = texture;
            
            // 生成高斯权重矩阵
            let gaussianM = gaussianMatrix(3);
            renderer.uniforms.tGaussian = gaussianM.matrix;
            renderer.uniforms.uRadius = 3;

            // 画布的实际宽高
            renderer.uniforms.uResolution = [1000.0, 554.0];

            // 4.
            renderer.setMeshData([{
                positions:[
                    [-1, -1],
                    [-1, 1],
                    [1, 1],
                    [1, -1],
                ],
                attributes:{
                    uv:[
                        [0, 0],
                        [0, 1],
                        [1, 1],
                        [1, 0],
                    ]
                },
                cells: [[0, 1, 2], [2, 0, 3]],
            }]);

            // 5.
            renderer.render();

        })();
        
    </script>
</body>
</html>